import React from 'react'
import {connect,} from 'react-redux'
import RedNickNameIcon from '../../../../../res/images/web/game-room/vip／nickname@2x.png'
import InfoIcon from '../../../../../res/images/web/game-room/vip／news@2x.png'
import NoAdsIcon from '../../../../../res/images/web/game-room/vip／no ad@2x.png'
import HonorIcon from '../../../../../res/images/web/game-room/vip／vip id@2x.png'
import FreeGiftIcon from '../../../../../res/images/web/game-room/vip／gift@2x.png'
import ChangeNameIcon from '../../../../../res/images/web/game-room/vip／change nickname@2x.png'
import CustomButton from "../../../../../shared-components/CustomButton/CustomBotton"
import TitleQuota from "../../../../../res/images/web/game-room/title-symbol.png"
import AgreeIconEmpty from "../../../../../res/images/web/game-room/choose agree@2x.png"
import AgreeIconCheck from "../../../../../res/images/web/game-room/choose agree-selected@2x.png"
import './vip.css'
import {Toast, WhiteSpace, WingBlank,} from "antd-mobile"
import LocalStorageService from "../../../../../utils/LocalStorageService"
import VipModal from "../../../../../shared-components/VipModal/VipModal"
import VipCard from "../../../../../shared-components/VipCard/VipCard"
import {app_name} from "../../../../../utils/constants";

class Vip extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            modalShow: false,
            agree: false,
        }
    }

    componentDidMount() {
        const flag = this.props.user.userdetail.initFlag
        const uid = LocalStorageService.get('userid')
        if (flag === 0) {
            this.props.fetchUserDetail({uid})
        }
    }

    onModalClose = () => {
        this.setState({
            modalShow: false,
        })
    }

    onPay = () => {
        if (this.checkAgree()) {
            this.setState({modalShow: true,})
        }
    }

    checkAgree = () => {
        if (this.state.agree) {
            return true
        } else {
            Toast.info('请先阅读并同意协议和政策', 1)
            return false
        }
    }



    render() {

        const userDetail = this.props.user.userdetail
        const myCoin = userDetail.Gold
        const agree = this.state.agree
        const isVip = userDetail.Vip > 0

        const benefitsList = [
            {iconUrl: RedNickNameIcon, title: '昵称红名',},
            {iconUrl: InfoIcon, title: '独享情报',},
            {iconUrl: NoAdsIcon, title: '免广告',},
            {iconUrl: HonorIcon, title: '尊贵身份',},
            {iconUrl: FreeGiftIcon, title: '380金币道具',},
            {iconUrl: ChangeNameIcon, title: '改名无限制',},
            // {iconUrl: FreeCoinIcon, title: '380金币',},
        ]


        const benefitsTemplate = (benefitsList.map(benefit => (
            <div key={benefit.title} className='game-room-vip-benefit-item'>
                <img src={benefit.iconUrl} alt='' style={{width: '24px',}}/>
                <p>{benefit.title}</p>
            </div>
        )))

        const btnProps = {
            color: agree ? '#F3C46C' : 'rgba(51,51,51,0.4)',
            bg: agree ? 'linear-gradient(180deg,rgba(119,90,19,1) 0%,rgba(66,46,8,1) 100%)' : '#E9E6EA',
            shadow: agree ? '0px 4px 10px 0px rgba(74,53,19,0.5)' : '',
        }


        return (

            <>
                <VipModal
                    visible={this.state.modalShow}
                    onModalClose={this.onModalClose}
                    myCoin={myCoin}
                />
                <div className='game-room-vip-ctn'>
                    <WingBlank>
                        <WhiteSpace/>
                        <VipCard />
                        <div className='game-room-b-list-ctn flex-space-between-align-center flex-wrap-container'>
                            <div className='game-room-vip-benefit-title-ctn'>
                                <img src={TitleQuota} alt=''/>
                                <p className='game-room-vip-benefit-title'>
                                    专享权益
                                </p>
                                <img src={TitleQuota} alt=''/>
                            </div>
                            {benefitsTemplate}
                        </div>
                        <div className='game-room-btn-ctn'>
                            <div
                                className='game-room-btn-ctn-up'
                                onClick={() => {this.setState({agree: !this.state.agree})}}
                            >
                                <img src={agree ? AgreeIconCheck : AgreeIconEmpty} alt='' style={{height: 12, width: 12,}}/>
                                <span>开通会员视为同意《{app_name}充值协议》</span>
                            </div>
                            <CustomButton
                                {...btnProps}
                                onClick={this.onPay}

                            >{isVip ? '立即续费' : '我要开通'}</CustomButton>
                        </div>
                    </WingBlank>
                </div>
            </>

        )
    }
}

const mapState = state => ({
    user: state.user,
})

const mapDispatch = dispatch => ({
    fetchUserDetail: (id) => dispatch.user.fetchUserDetail(id),
})


export default connect(mapState, mapDispatch)(Vip)
